<template>
  <FlexLayout class="home" direction="column" alignItems="stretch">
      <FlexItem class="article-item" flex="0 0 100px" v-for="(item) in listData" :key="item.id">
        <div class="title">{{item.title}}</div>
        <a-row type="flex" justify="center" align="middle">
          <a-col :span="12">
            <div class="user-info">
              <img :src="item._user?.avatar" height="16" />
              <span>{{item._user?.name}}</span>
            </div>
          </a-col>
          <a-col :span="12">
            <a-row type="flex" justify="space-between">
              <a-col :span="8">
                <EyeOutlined /><span>{{item.views}}</span>
              </a-col>
              <a-col :span="8">
                <LikeOutlined /><span>{{item.thumbs}}</span>
              </a-col>
              <a-col :span="8">
                <MessageOutlined /><span>{{item.comments}}</span>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        
      </FlexItem>
    </FlexLayout>
</template>

<script>
import FlexLayout from '../../components/common/FlexLayout';
import FlexItem from '../../components/common/FlexItem';
import {getArticles} from '../../graphql/module/article';
import { EyeOutlined,MessageOutlined,LikeOutlined } from '@ant-design/icons-vue';
export default {
  name: 'Home',
  components:{
    FlexLayout,FlexItem,EyeOutlined,MessageOutlined,LikeOutlined
  },
  data(){
    return {
      listData:[]
    }
  },
  created(){
    this.getArticleList();
  },
  methods:{
    getArticleList(){
      const selection={
        article:['id','title','thumbs','views','comments'],user:['id','name','avatar']
      },page={
        current:0,size:10
      },where={},sort={
        views:'DESC'
      };
      getArticles(selection,page,where,sort).then(res =>{
        this.listData=res.articles.articles;
      });
    }
  }
}
</script>
<style scoped>
.anticon{
  margin-right: 8px;
}
</style>

<style lang="scss" scoped>
.home{
  padding: 20px;
  .article-item{
    margin: 5px 0px;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    &:hover{
      background-color: rgba(93, 169, 231,0.1);
    }
    .title{
      font-size: 16px;
      font-weight: bold;
      max-width: 80%;
      @include ellipsis;
    }
    .user-info{
      img{
        margin-right: 20px;
      }
      span{
        color:rgba(0, 0, 0, 0.65);
        @include ellipsis;
        max-width: calc(100% - 40px);
        vertical-align: middle;
      }
    }

  }
}
</style>